<template>
  <div>
    <SectionTitle :title="'Our capability'"/>
    <div class="line-wrapper">
      <div class="content">
        <h4>我们的能力</h4>
        <ul>
          <li v-for="item in bilities" :key="item.name">
            <div class="img-wrapper">
              <img :src="item.url" alt="">
            </div>
            <h5>{{item.name}}</h5>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import SectionTitle from '../components/SectionTitle';

  export default {
    name: 'OurCapability',
    data() {
      return {
        bilities: [
          {name: '有效解决95%的询问', url: require('../assets/imgs/service/bility1.png')},
          {name: '精准率高达98%', url: require('../assets/imgs/service/bility2.png')},
          {name: '7 x 24hrs在线', url: require('../assets/imgs/service/bility3.png')},
          {name: '减少客户50%的等候时间', url: require('../assets/imgs/service/bility4.png')}
        ]
      };
    },
    components: {
      SectionTitle
    }
  };
</script>

<style lang="less">
  @import "../assets/css/vars";
  .line-wrapper {
    position: relative;
    height: 400px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 1px;
      width: 100%;
      background-color: @baseColor;
    }

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 300px;
      border: 1px solid @baseColor;
      background-color: @bgColor;
      display: flex;
      align-items: center;
      justify-content: center;

      h4 {
        position: absolute;
        top: -16px;
        left: 225px;
        padding: 5px 10px;
        background-color: @bgColor;
      }

      ul {
        display: flex;
        justify-content: space-around;
        width: 80%;

        li {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          .img-wrapper {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-bottom: 30px;
            img {
              width: 100%;
            }
          }
          h5 {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: max-content;
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .line-wrapper {
      position: relative;
      height: unset;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background-color: @baseColor;
        z-index: -1;
      }

      .content {
        position: unset;
        top: unset;
        left: unset;
        transform: unset;
        width: calc(100% - 30px);
        height: unset;
        border: 1px solid @baseColor;
        background-color: @bgColor;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 20px;

        h4 {
          position: absolute;
          top: -16px;
          left: 50%;
          transform: translateX(-50%);
          padding: 5px 10px;
          background-color: @bgColor;
        }

        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 80%;

          li {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            width: 50%;
            margin-bottom: 15px;
            .img-wrapper {
              width: 90px;
              height: 90px;
              border-radius: 50%;
              margin-bottom: 15px;
              img {
                width: 100%;
              }
            }
            h5 {
              position: unset;
              top: unset;
              left: unset;
              transform: unset;
              width: max-content;
            }
          }
        }
      }
    }
  }
</style>
